<template>
  <div class="home">
    <Layout>
      <header-top></header-top>
      <Content>
        <index-search></index-search>
        <index-nav></index-nav>
        <div class="container">
          <home-Nav :list="list"></home-Nav>
          <div class="container-right" style="width: 260px">
            <small-nav></small-nav>
            <img src="../assets/meirong1.jpg" alt="" style="width: 100%;height: 237px">
            <small-nav></small-nav>
            <img src="../assets/meirong1.jpg" alt="" style="width: 100%;height: 237px">
          </div>
          <div style="clear: both"></div>
          <product-Nav :navList="i" v-for="(i, k) in navList" :key="k"></product-Nav>
        </div>
        <bottom-icon></bottom-icon>
      </Content>
      <Footer>
        <page-footer></page-footer>
      </Footer>
    </Layout>
  </div>
</template>

<script>
import HeaderMenu from '@/components/Header/'
import HeaderTop from '../components/Header/Top'
import TopSearch from '../components/TopSearch/'
import PageFooter from '../components/Footer/'
import homeNav from '../components/HomeNav/HomeNav.vue'
import productReservation from '../components/ProductReservation/index.vue'
import BottomIcon from '../components/BottomIcon/'
import productNav from '../components/ProductNav/'
import IndexSearch from '../components/IndexCom/'
import IndexNav from '../components/IndexCom/IndexNav'
import smallNav from '../components/SmallNav/'
export default {
  name: 'index',
  components: {
      HeaderMenu,
      BottomIcon,
      PageFooter,
      homeNav,
      productReservation,
      HeaderTop,
      IndexSearch,
      productNav,
      smallNav,
      IndexNav,
      TopSearch,
  },
   data () {
      return {
          // modal: false,
          list: [
              {id: 1, name: '推荐'},
              {id: 2, name: '眼睛'},
              {id: 3, name: '鼻子'},
              {id: 4, name: '轮廓'},
              {id: 5, name: '抽脂'},
              {id: 6, name: '填充'},
              {id: 7, name: '胸部'},
              {id: 8, name: '微整'}
          ],
          navList: [
              {
                  id: 1, title: '眼睛', type: 1,
                  titleList: [
                      {id: 1, name: '割双眼皮'},
                      {id: 2, name: '开眼角'},
                      {id: 3, name: '去眼袋'},
                      {id: 4, name: '眼部整形失败修复'},
                      {id: 5, name: '综合整形'},
                      {id: 6, name: ' 眼型矫正'},
                      {id: 7, name: '切眉提眉'},
                      {id: 8, name: '治疗近视眼'},
                  ],
                  child: [
                      {
                          evaluate: 2.0,
                          price: 9999,
                          oldPrice: 12323,
                          delist: '【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou: '美橙医疗整形美容',
                          num: 22
                      },
                      {
                          evaluate: 2.0,
                          price: 9999,
                          oldPrice: 12323,
                          delist: '【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou: '美橙医疗整形美容',
                          num: 22
                      },
                      {
                          evaluate: 2.0,
                          price: 9999,
                          oldPrice: 12323,
                          delist: '【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou: '美橙医疗整形美容',
                          num: 22
                      },
                      {
                          evaluate: 2.0,
                          price: 9999,
                          oldPrice: 12323,
                          delist: '【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou: '美橙医疗整形美容',
                          num: 22
                      },
                      {
                          evaluate: 2.0,
                          price: 9999,
                          oldPrice: 12323,
                          delist: '【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou: '美橙医疗整形美容',
                          num: 22
                      },

                  ]
              },

              {id: 2, title: '眼睛',type:1,
                  titleList:[
                      {id:1,name:'眼睛'},
                      {id:2,name:'眼睛'},
                      {id:3,name:'眼睛'},
                      {id:4,name:'眼睛'},
                      {id:5,name:'眼睛'},
                      {id:6,name:' 眼睛'},
                      {id:7,name:'眼睛'},
                      {id:8,name:'眼睛'},
                      ],
                  child:[
                      {
                          evaluate:2.0,
                          price:9999,
                          oldPrice:12323,
                          delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou:'美橙医疗整形美容',
                          num:22
                      },
                      {
                          evaluate:2.0,
                          price:9999,
                          oldPrice:12323,
                          delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou:'美橙医疗整形美容',
                          num:22
                      },
                      {
                          evaluate:2.0,
                          price:9999,
                          oldPrice:12323,
                          delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou:'美橙医疗整形美容',
                          num:22
                      },
                      {
                          evaluate:2.0,
                          price:9999,
                          oldPrice:12323,
                          delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou:'美橙医疗整形美容',
                          num:22
                      },
                      {
                          evaluate:2.0,
                          price:9999,
                          oldPrice:12323,
                          delist:'【水光针】巨补水保湿嫩肤收缩毛毛孔除皱美白补水',
                          jiGou:'美橙医疗整形美容',
                          num:22
                      },

                  ],
              }
          ]
      }
   },
    methods: {
    }

}
</script>

<style lang="less" scoped>
  @import "../style/style.less";
  .container-right{
    float: right;
  }

</style>
